<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
  <title>v-show, v-if指令</title>
</head>

<body>
  <div id="app">
    <input type="button" value="切换显示状态" @click="changeIsShow">
    <!-- 根据表达值的真假,切换元素的显示和隐藏 -->
    <p v-show="isShow">冻死了---v-show</p>
    <p v-if="isShow">冻死了</p>
  </div>

  <!-- 导入开发版本的Vue.js -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <script>
    // 创建Vue实例对象, 设置el属性和data属性
    var app = new Vue({
      el: '#app',
      data: {
        isShow: false,
      },
      methods: {
        changeIsShow: function () {
          this.isShow = !this.isShow;
        },
      }
    })  
  </script>
</body>

</html>